<template>
    <portlet name="产品使用记录">
        <div class="search_header">
            <i-form :model="formItem" :label-width="80">
                <Row>
                    <i-col span='5'>
                        <Form-item label="交易状态">
                            <i-select :model.sync="formItem.transState" placeholder="选择状态">
                                <i-option value="0">充值</i-option>
                                <i-option value="1">调账</i-option>
                            </i-select>
                        </Form-item>
                    </i-col>
                    <i-col span='11'>
                        <Form-item label="交易时间">
                            <Row>
                                <i-col span="11">
                                    <Date-picker @on-change='changeStartDate' type="date" placeholder="开始日期" :value.sync="formItem.startDate"></Date-picker>
                                </i-col>
                                <i-col span="2" style="text-align: center">-</i-col>
                                <i-col span="11">
                                    <Date-picker @on-change='changeEndDate' type="date" placeholder="结束时间" :value.sync="formItem.endDate"></Date-picker>
                                </i-col>
                            </Row>
                        </Form-item>
                    </i-col>
                    <i-col span='6'>
                        <Form-item :label-width='10'>
                            <i-button @click='searchData' type="primary">查询</i-button>
                            <i-button @click='searchData' type="primary">EXCEL导出</i-button>
                        </Form-item>
                    </i-col>
                </Row>
            </i-form>
        </div>
        <div class="search_content">
            <i-table :columns="columns1" :data="data2"></i-table>
        </div>
        <div class="search_footer">
            <span><Page @on-change='changePage' :total='pageInfor.records' :page-size='pageInfor.rows' :current='pageInfor.page' show-elevator show-sizer></Page></span>
        </div>
    </portlet>
</template>
<script>
    import Portlet from '../../components/portlet.vue';
    export default {
        components:{ Portlet },
        data () {
            return {
                formItem: {
                    transState:'',
                    startDate: '',
                    endDate: '',
                },
                day:{
                    startDateD:'',
                    endDateD:''
                },
                pageInfor:{
                    page:1,
                    rows:10,
                    records:1,
                },
                columns1: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '状态',
                        key: 'opt_type'
                    },
                    {
                        title: '操作金额',
                        key: 'money'
                    },
                    {
                        title: '当前余额',
                        key: 'last_money'
                    },
                    {
                        title: '操作时间',
                        key: 'date'
                    },
                ],
                data1: [
                ]
            }
        },
        computed:{
            data2(){
                return this.data1.map(function(data){
                    let newd=data;
                    let temd=new Date(data.ac_date.time);
                    newd.date=temd.toLocaleString();
                    // newd.date=parseInt(data.ac_date.year+1900)+'/'+data.ac_date.month+'/'+data.ac_date.day+'  '+data.ac_date.hours+':'+data.ac_date.minutes;
                    newd.opt_type=data.opt_type==0?'充值':'调账';
                    return newd;
                });
            },
        },
        methods: {
            changePage(a){
                this.pageInfor.page=a;
                this.getData();
            },
            changeStartDate(a){
                this.day.startDateD=a.toString();
            },
            changeEndDate(a){
                this.day.endDateD=a.toString();
            },
            searchData(){
                this.getData();
            },
            getData(){
                
                let pp={page:this.pageInfor.page,
                            rows:this.pageInfor.rows,
                            endDate:this.day.endDateD,
                            startDate:this.day.startDateD,
                            transState:this.formItem.transState,}
                
                this.$http.jsonp(this.path+'consump/consumpServlet/queryCharge',{
                    params:pp,
                    jsonp:'callback'
                }).then(
                    (datas)=>{
                        if(datas.body.code=='001'){
                            this.pageInfor.page=parseInt(datas.body.result.page);
                            this.pageInfor.records=datas.body.result.records;
                            this.data1=datas.body.result.rows;
                        }else if(datas.body.code=='002'){
                            this.$Message.success('提交信息出错p!');
                        }else if(datas.body.code=='997'||datas.body.code=='998'){
                            this.store.state.user.companyId=null;
                            this.store.state.user.companyName=null;
                            this.store.state.allInfor=null;
                            this.$Message.error('登陆超时或未登陆,请登陆!');
                            this.myRouter.go({path:'/login'});
                        }
                    },
                    (error)=>{
                        this.$Message.success('网络问题!');
                    }   
                );
            }
        },

        ready(){
            this.$nextTick(()=>{
                this.getData();
         })
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/scss">
    @import '../../styles/query.scss';
</style>